<template>
  <div ref="chartRef"  :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, Ref } from 'vue';
  import { useECharts } from '@/hooks/web/useECharts';
  import { basicProps } from './props';
  import { analysisGetDataAPI, getcollectioncount, getEchartAPI } from "@/api/demo/analysis";
  import { useI18n } from "@/hooks/web/useI18n";
  const { t } = useI18n();
  defineProps({
    ...basicProps,
  });
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

  onMounted(async () => {
    let Data = await getcollectioncount();
    let dates = [];
    let values = [];
    if (Array.isArray(Data.data.dayLogs)) {
      // 获取最后 15 条数据
      let last15Data = Data.data.dayLogs.slice(-50);

      // 提取 date 和 value 组成两个数组
      dates = last15Data.map((item) => item.date);
      values = last15Data.map((item) => item.value);

    }

    setOptions({
      grid: {
        top: 20, // 设置顶部距离
        left: 50, // 设置底部距离
        right: 50, // 设置底部距离
      },
      toolbox: {
        show: true,
        feature: {
          magicType: { show: true, type: ['line', 'bar'] },
        },
      },
      dataZoom: [
        {
          show: true,
          start: 0,
          end: 100
        },

      ],
      xAxis: {
        type: 'category',
        data: dates,
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: values,
          type: 'bar',
        },
      ],
      tooltip: {
        trigger: 'item', // 触发类型为 'item' 表示针对数据项触发
        formatter: function (params) {
          return `${t('sys.device.columns.time')}: ${params.name}<br/>${t('sys.analysis.everynum')}: ${params.value}`;
        },
      },
    });
  });
</script>
